<template>
  <div>
    <div v-for="(i, index) in options" :key="index" class="inline-block">
      <label class="option-item">
        <input type="checkbox" class="checkbox" :value="i.value || i.label" v-model="checkList" />
        <div class="option-inner option">
          <div>
            <div class="tickmark" />
            <div class="icon">
              <svg-icon v-if="i.icon" :icon-class="i.icon" class="text-2xl" />
              <img :src="i.img" v-else />
            </div>
            <div class="name">{{ i.label }}</div>
          </div>
        </div>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardCheckboxGroup',
  props: {
    options: Array,
    checked: Array
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  data() {
    return {
      checkList: this.checked
    }
  },
  methods: {},
  watch: {
    checkList(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.$emit('change', newValue, oldValue)
      }
    },
    checked(value) {
      this.checkList = value
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 0 auto;
}

.option-item {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  position: relative;
  width: 140px;
  height: 140px;
  margin: 10px;
  .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    &:checked {
      display: block;
      & ~ .option-inner {
        border-color: #25d366;
        color: #25d366;
        .tickmark {
          display: block;
        }
      }
    }
  }
  .option-inner {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    /* padding: 20px 0; */
    cursor: pointer;
    color: #585c68;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    position: relative;
    .icon {
      margin-bottom: 20px;
    }
    .name {
      display: flex;
      align-items: center;
      height: 50px;
    }
    &.option {
      .tickmark {
        border-color: #25d366 transparent transparent #25d366;
      }
    }
    .tickmark {
      position: absolute;
      top: -1px;
      left: -1px;
      border: 20px solid;
      display: none;
      &:before {
        content: '';
        position: absolute;
        top: -15px;
        left: -15px;
        width: 19px;
        height: 9px;
        border: 3px solid;
        border-color: transparent transparent #fff #fff;
        transform: rotate(-45deg);
      }
    }
  }
}
</style>
